<template>
  <div>
      <Modal v-model="show" title="编辑用户"
             :mask-closable="false" :closable="false">
          <Form ref="modalForm" :model="data" :rules="ruls"
                :label-width="80">
              <FormItem label="用户名" prop="uname">
                  <Input v-model.trim="data.uname" placeholder="用户名" ></Input>
              </FormItem>
              <FormItem label="密码" prop="password">
                  <Input  v-model.trim="data.password" placeholder="密码"></Input>
              </FormItem>
              <FormItem label="手机" prop="ucall">
                  <Input  v-model.trim="data.ucall" placeholder="手机"></Input>
              </FormItem>

              <FormItem label="身份uid" prop="uid">
                  <Input v-model.trim="data.uid" placeholder="身份uid"></Input>
              </FormItem>

              <FormItem label="银行卡" prop="ucard">
                  <Input  v-model.trim="data.ucard" placeholder="银行卡"></Input>
              </FormItem>

              <FormItem label="地址" prop="uaddr">
                  <Input  v-model.trim="data.uaddr" placeholder="地址"></Input>
              </FormItem>

              <Form-item label="角色选择" prop="productCode" >
                  <Select v-model="data.role" placeholder="角色选择" >
                      <Option value="1" >超级用户</Option>
                      <Option value="2">商户</Option>
                      <Option value="3">业务员</Option>
                  </Select>
              </Form-item>

              <Form-item label="添加时间" prop="请选择时间" >
                  <DatePicker type="date"  v-model="data.signTime" placeholder="请选择时间" style="width: 387px"></DatePicker>
              </Form-item>

              <!--<FormItem label="角色选择" prop="userStatus">-->
              <!--&lt;!&ndash;<Select v-model.trim="data.userStatus" style="width:100%">&ndash;&gt;-->
              <!--&lt;!&ndash;<Option v-for="item in [{label:'正常',value:1},{label:'锁定',value:0}]"&ndash;&gt;-->
              <!--&lt;!&ndash;:value="item.value" :key="item.value">{{ item.label }}</Option>&ndash;&gt;-->
              <!--&lt;!&ndash;</Select>&ndash;&gt;-->
              <!--</FormItem>-->
              <!--<FormItem label="角色组" prop="roles">-->
              <!--<CheckboxGroup v-model="data.roles">-->
              <!--<Checkbox v-for="(item,index) in roles" :label="index" :key="item.id">{{item.roleName}}</Checkbox>-->
              <!--</CheckboxGroup>-->
              <!--</FormItem>-->
          </Form>
          <div slot="footer">
              <Button type="default" :disabled="loading" @click="cancel(false)">取消</Button>
              <Button type="primary" :loading="loading" @click="ok">确定</Button>
          </div>
      </Modal>
  </div>
</template>
<script>
import { post } from '@/libs/axios-cfg'
export default {
  data() {
    return {
      show: true,
      loading: false,
        data: {
            role: '',
            uname:"",
            password: "",
            ucall: "",
            uid: '',
            ucard: '',
            uaddr: '',

            //   "uid":"身份证",
            //   "ucard":"银行卡",
            //   "uaddr":"地址",
            //   "isExpiry":"2019-07-01T09:57:51.463Z",
            //   "bankName":"银行",
            //   "createTime":"2019-07-01T09:57:51.463Z",
            //   "signTime":"2019-07-01T09:57:51.463",
            //   "ustate":1,
            //   "email":"邮箱",
            //   "property":2,
            //   "role":3,
            //   "signature":"1111111",
            // userName: "",
            // age: 0,
            // userStatus: 1,
            // rePassword: "",
            // roles: []
        },
      ruls: {
        userName: [
            { required: true, message: "用户名不能为空" },
            {pattern:/^(\w){4,16}$/,message:'用户名应为[A-Za-z0-9_]组成的4-16位字符'}
        ],
        age: [{ required: true, message: "年龄不能为空" }],
        userStatus: [{ required: true, message: "用户状态不能为空" }],
        roles: [{ required: true, message: "请至少选择一个角色" }]
      }
    };
  },
  props: {
    roles: {
      type: Array,
      default: []
    },
   // ObjectData:
    uid:{
        type: Object,
        default:{}
    }
  },
  created(){
      this.data = this.uid
      console.log('uid======'+this.uid)
      this.getUserInfo();
  },
  methods: {
    /**
     * @description 关闭Modal
     * @param reload 是否重新加载数据
     */
    cancel(reload = false) {
      this.$emit("cancel", "update", reload);
    },
    /**
     * @description 获取用户信息
     */
    async getUserInfo(){
        // try {
        //     let res = await post('/system/user/get/id/{id}',null,{
        //         id:this.uid
        //     })
        //     this.data = res.data;
        //     //进行角色的匹配
        //     let roles = []
        //     if(this.data.roles!=null){
        //         this.data.roles.forEach(el=>{
        //             this.roles.forEach((r,index)=>{
        //                 if(el.id == r.id){ //判断当前用户角色列表中的角色ID是否和全部角色列表中的对应
        //                     roles.push(index) //对应则加入当前角色的数组下标
        //                 }
        //             })
        //         })
        //     }
        //     this.data.roles = roles;
        // } catch (error) {
        //     this.$throw(error)
        // }
    },
    /**
     * @description 确定按钮单击回调
     */
    ok() {
      this.$refs.modalForm.validate(valid => {
        if (valid) {
            let data = JSON.parse(JSON.stringify(this.data));
            this.update(data)
        }
      });
    },
    /**
     * @description 更新用户数据请求
     */
    async update(data){
        this.loading = true;
        this.loading = true;
        try {
            let res = await post('/user/save',data)
            this.$Message.success(res.msg);
            this.cancel(true)
        } catch (error) {
            this.$throw(error)
        }
        this.loading = false;
    }
  }
};
</script>

